<template>
	<view class="box">
		<view class="head_box">
			<view class="mt" v-if="info.plot">所在小区: {{info.plot.name}}</view>
			<view class="mt" v-if="info.floor">住房地址: <text v-if="info.floor">{{info.floor.name}}</text><text v-if="info.layer">{{info.layer.name}}</text><text v-if="info.room">{{info.room.name}}</text></view>
			<view v-if="jf.name">收费单位: {{jf.name}}</view>
		</view>
		<view class="money_box">
			<view class="msg">当前欠费</view>
			<view><text class="money">{{jf.money}}</text><text>元</text> </view>
		</view>
		
		<view class="pay_box" @click="$project.toPath('/pages/fw/jf/order')">直接缴费</view>
		
		<view class="cha_box" @click="$project.toPath('/pages/fw/jf/record')">账单查询</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{},
				jf:{money:0,name:''},
				user:'',
				room_id:'',
			}
		},
		onLoad(e) {
			if(e.title){
				uni.setNavigationBarTitle({
					title:e.title
				})
			}
			
		},
		onShow() {
			
			this.$needLogin(()=>{
				this.getUserInfo();
			},3,'/pages/fw/jf/index','请先登录',2);
			
		 	
		},
		methods:{
			getUserInfo(){
				let token=uni.getStorageSync('userToken');
				if(!token) return;
				
				this.$get(this.$api.userInfo,{token:token},res=>{
					let data=res.data;
					if(data.code==1){
						this.user=data.data;
						this.$project.common(this.user,3,2);
						 this.getAddress();
					}
				});
			},
			getIndex(){
				let params={token:uni.getStorageSync('userToken'),room_id:this.room_id};
				this.$get(this.$api.jfIndex,params,res=>{
					let data=res.data;
					if(data.code==1){
						this.jf=data.data;
					}
				});
			},
			getAddress(){
				let params={token:uni.getStorageSync('userToken'),status:2};
				this.$get(this.$api.aduitInfo,params,res=>{
					let data=res.data;
					if(data.code==1){
						this.info=data.data;
						this.room_id=data.data.room_id;
						 this.getIndex();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head_box{
		width: 100%;
		height: 370rpx;
		background-color:#489AFE;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		color: white;
		font-size: 28rpx;
	}
	.mt{
		margin-bottom: 10rpx;
	}
	
	.money_box{
		border-radius: 10rpx;
		width: 94%;
		margin: 0 auto;
		text-align: center;
		background-color: white;
		color:#469CF7;
		position: relative;
		top: -160rpx;
		box-sizing: border-box;
		padding: 80rpx 0;
	}
	.money{
		font-size: 60rpx;
	}
	.msg{
		margin-bottom: 15rpx;
		letter-spacing:4rpx;
	}
	.pay_box{
		width: 94%;
		margin: 0 auto;
		background-color: #489AFE;
		color: white;
		text-align: center;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		letter-spacing:4rpx;
	}
	.cha_box{
		text-align: center;
		color:#469CF7;
		margin-top: 20rpx;
		letter-spacing:4rpx;
	}
</style>